body {
    background-color: var(--themeColor);
    overflow: hidden;
}

.main {
    padding-bottom: .88rem;
}

.main .top-cate {
    position: sticky;
    top: .88rem;
    background-color: var(--themeColor);
    z-index: 999;
}

.main .category-container {
    display: flex;
    overflow-x: scroll;
    z-index: 999999;
    padding: 0 .2rem;
    border-radius: .20rem;
}

.main .category-container .lay-this img {
    border: 1px solid var(--bd);
}

.main .category-container .lay-this .category-text {
    color: var(--bd);
}

.main .category-item {
    margin: .2rem;
    box-sizing: border-box;
    text-align: center;
}

.main .category-item img {
    width: .86rem;
    height: .86rem;
    border-radius: 50%
}

.main .category-item .category-text {
    margin-top: .15rem;
    font-size: .24rem;
    color: var(--dcl);
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.main .bottom-cate {
    background-color: var(--ff);
}

.main .bottom-cate .left {
    background-color: var(--themeColor);
}

.main .bottom-cate .left .item {
    width: 1.65rem;
    padding: .35rem;
    font-weight: 400;
    font-size: var(--default-font-size-28);
    color: var(--dcl);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.main .bottom-cate .left .lay-this {
    color: var(--bd);
    position: relative;
    background-color: var(--ff);
}

.main .bottom-cate .left .lay-this:before {
    content: "";
    position: absolute;
    margin: auto 0;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: .06rem;
    height: .39rem;
    background-image: url('/static/index/images/classify/this.png');
    background-size: contain;
    background-repeat: no-repeat;
}

.main .bottom-cate .right {
}

.main .bottom-cate .right .pro-box:last-child {
    border-bottom: none;
}

.main .bottom-cate .right .pro-box {
    position: relative;
    border-bottom: 1px solid var(--ee);
}

.main .bottom-cate .right .pro-box .cart {
    position: absolute;
    bottom: .3rem;
    right: .1rem;
    width: .48rem;
    height: .48rem;
}

.main .bottom-cate .right .pro-box .icon {
    width: 1.48rem;
    height: 1.48rem;
    background: var(--ff);
}

.main .bottom-cate .right .pro-box .icon > img {
    border-radius: .14rem;
    width: 100%;
    height: 100%;
}

.main .bottom-cate .right .pro-box .info {
    flex: 1;
    margin-left: .15rem;
}

.main .bottom-cate .right .pro-box .info .title {
    font-weight: 500;
    font-size: .25rem;
    color: var(--dcl);
    margin-bottom: .15rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}

.main .bottom-cate .right .pro-box .info .underline {
    font-size: .22rem;
    color: var(--c9);
    text-decoration-line: line-through;
}

.main .bottom-cate .right .pro-box .info .price {
    font-weight: bold;
    font-size: .3rem;
    color: var(--bd);
}

.main .bottom-cate .right .pro-box .info .front:before {
    content: '￥';
    color: var(--bd);
    font-size: .24rem;
}

.theme-color {
    background-color: var(--themeColor);
}

.scroll-container {
    overflow-y: scroll;
    box-sizing: border-box;
    height: calc(100vh - 4rem);
}
